<template>
  <div>
    <button v-for="item in plist" @click="handle(item.id)">点击</button>
  </div>
</template>

<script setup>
const props = defineProps(["plist"]);
const emits = defineEmits(["chuan"]);
// const props = defineProps({
//   plist: [Array]
//  });

// 点击按钮事件
const handle = (_id) => {
  console.log(_id);
  emits("chuan", { boxid: _id, bgcolor: getRandomColor() });
};

// 随机颜色(16进制)
// 1000 ~ 2000 随机整数 => 16 进制值
const getRandomColor = () => {
  // 随机数
  let ran = Math.floor(Math.random() * (2000 - 1000 + 1) + 1000);
  //   拼接转化为16进制
  let colorValue = "#" + Number.parseInt(ran, 16);
  return colorValue;
};
</script>

<style scoped>
div {
  display: flex;
  justify-content: space-around;
}
</style>
